<template>
  <el-drawer v-model="isOpenWin" style="background-color: var(--el-farms-win-bg-color);" class="farm2-data-form"
    :append-to-body="true" :with-header="false" :size="winWidth">
    <div class="header">
      <img src="\icon\file.png" alt="AI Icon" />
      <span>{{ file.title }}</span>
    </div>
    <div class="content" v-loading="loadingFlag">
      <div class="message" v-if="!showView" style="padding: 20px;">
        <div style="margin-top: 20px;"> 文件大小： {{ farmFileUnitTools.getFileSizeTitle(file.size) }}</div>
        <div style="line-height: 1.7em;">
          预览文件处理状态： {{ file.stateTitle }}
          <div title="预览文件转换进度" v-if="processState.isShow"> &nbsp;|&nbsp;{{
            processState.msg }}
          </div>
          <div title="预览文件转换进度" v-if="processState.isShow">
            <el-progress :percentage="processState.percent" :stroke-width="15" striped striped-flow :duration="10" />
          </div>
        </div>
      </div>
      <div class="message" v-if="showView" style="height: 100%;">
        <view_all :extend-file-id="file.extendFile.id" :file-model="file.extendFile.filemodel"></view_all>
      </div>
    </div>
    <div class="footer" v-loading="loadingFlag">
      <div class="input-container">
        <el-button style="width: 50%;min-width: 100px;" @click="downFile()" type="success" plain icon="Download"
          round>下载附件</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script lang="ts" setup>
import view_all from '@/views/file_view/view_all.vue'
import { onUnmounted, reactive, ref } from 'vue';
import farm2Request from '@/service/remoteRequests/Farm2Request';
import notice from '@/components/msg/FarmNotice';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import type { DataResponse } from '@/types/commons/DataResponse';
import farmRoutUtils from '@/hook/farmRoutUtils';
import farmFileUnitTools from '@/hook/farmFileUnitTools';
import farmProcessUtils from '@/hook/farmProcessUtils';
//------------------------------------------------------------------------------------
const isOpenWin = ref(false);
//预览文件转换进度
const processState = reactive({
  isShow: false,
  percent: 1,
  msg: ''
});
const winWidth = ref('300px')
const loadingFlag = ref(false);//加载中遮罩
const showView = ref(false);
const file = reactive({ title: '', id: '', stateTitle: '', size: 0, extendFile: { filemodel: '', id: '' } });
let eventSource: EventSource | null;
const openWin = (fileid: string) => {
  isOpenWin.value = true;
  showView.value = false;
  winWidth.value = "300px";
  //加载附件信息
  farm2Request.submit('api/wfile/info', RequestTypeEnum.post, loadingFlag, { id: fileid }).then((response: DataResponse) => {
    const fileview = (response.data) as { title: string, stateTitle: string, size: number, extendFile: { filemodel: string, id: string } };
    file.title = fileview.title;
    //展示下载按钮
    file.id = fileid;
    file.size = fileview.size;
    //预览文件状态
    file.stateTitle = fileview.stateTitle;
    //是否有预览文件
    if (fileview.extendFile) {
      winWidth.value = "1000px";
      //展示预览内容
      file.extendFile.id = fileview.extendFile.id;
      file.extendFile.filemodel = fileview.extendFile.filemodel;
      showView.value = true;
    }
    if (!fileview.extendFile) {
      //加载附件处理进度
      eventSource = farmProcessUtils.processHandle(file.id, 'CONVERT_EXFILE', (msg: string, percent: number) => {
        processState.isShow = true;
        processState.msg = msg;
        processState.percent = percent;
        if (processState.percent >= 100) {
          openWin(fileid);
        }
      });
    }
  }).catch((msg: string) => {
    notice.byError(msg);//报错
    isOpenWin.value = false;
  });
};

const downFile = () => {
  farmRoutUtils.downloadFile(file.id);
}
//---------------------------------------------------

onUnmounted(() => {
  if (eventSource) {
    eventSource.close();
  }
});


defineExpose({
  openWin
});
</script>

<style scoped>
/* 全局样式 */
.header {
  padding: 20px;
  font-size: 18px;
  display: flex;
  align-items: center;
  color: #555555;
  font-weight: 700;
}

.header img {
  height: 32px;
  width: 32px;
  margin-right: 20px;
}

.content {
  height: calc(100vh - 170px);
  border-radius: 1em;
  background-color: #ffffff;
  margin: 20px;
  margin-bottom: 0px;
  margin-top: 0px;
  overflow: auto;
}

.content .message {
  color: #999999;
  font-size: 14px;
}

.content ul {
  margin-left: -10px;
  line-height: 3em;
  padding-top: 20px;
}

.footer {
  font-size: 12px;
  padding: 20px;
}

.input-container {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px 22px 22px 8px;
  padding: 10px;
  text-align: center;
}

.skc-chart-input {
  border: none !important;
  outline: none !important;
  resize: none;
  width: 200px;
  color: #555555;
}

.skc-chart-input:focus {
  border-color: transparent !important;
}
</style>
